<?php
/* @var $this CController */
$categoryList = Category::getPublicArray();
?>
<div id="design-wrapper" class="row-fluid">
    <div id="design-button">
        <a href="#" id="btn-product" class="active">Chọn sản phẩm</a>
        <a href="#" id="btn-item">Chọn item</a>
        <a href="#" id="btn-text">Chèn chữ</a>
        <a href="#" id="btn-upload">Tải ảnh</a>
    </div>
    <div class="design-data hide" id="product-tool">
        <form class="search-form" action="<?php echo $this->createUrl("design/productList"); ?>" method="GET">
            <div class="search-box">
                <input name="keyword" type="text" value="" placeholder="Tìm kiếm" />
                <a href="#" class="btn-search"></a>
            </div>
            <?php echo CHtml::dropDownList('categoryId', NULL, $categoryList, array("prompt" => "Chọn danh mục")); ?>
            <input type="hidden" name="page" value="1" max="1" />
        </form>
        <ul class="list-item">
        </ul>
        <div class="nav row-fluid">
            <div class="col-xs-5 text-left"><a href="#" class="btn-prev">< Quay lại</a></div>
            <div class="col-xs-2 text-center"><span class="info">1/1</span></div>
            <div class="col-xs-5 text-right"><a href="#" class="btn-next">Tiếp theo ></a></div>
        </div>
    </div>
    <div class="design-data hide" id="item-tool">
        <form class="search-form" action="<?php echo $this->createUrl("design/itemList"); ?>" method="GET">
            <div class="search-box">
                <input name="keyword" type="text" value="" placeholder="Tìm kiếm" />
                <a href="#" class="btn-search"></a>
            </div>
            <?php echo CHtml::dropDownList('categoryId', NULL, $categoryList, array("prompt" => "Chọn danh mục"));
            ?>
            <input type="hidden" name="page" value="1" max="1" />
        </form>
        <ul class="list-item">
        </ul>
        <div class="nav row-fluid">
            <div class="col-xs-5 text-left"><a href="#" class="btn-prev">< Quay lại</a></div>
            <div class="col-xs-2 text-center"><span class="info">1/1</span></div>
            <div class="col-xs-5 text-right"><a href="#" class="btn-next">Tiếp theo ></a></div>
        </div>
    </div>
    <div id="design-canvas">
    </div>
    <div id="design-properties">
        <ul class="list-unstyled pro-type">
        </ul>
        <ul class="list-unstyled pro-color">
        </ul>
        <ul class="list-unstyled pro-size">
        </ul>
    </div>
    <div id="pro-tool">
        <ul class="list-unstyled">
            <li class="pro-tool-new">
                <a class="btn-reset" href="#" title="Thiết kế lại từ đầu"></a>
            </li>
            <li class="pro-tool-item pro-tool-text hide">
                <a class="btn-font active" href="#" title=""></a>
                <div class="pro-font">
                    <p>Font chữ</p>
                    <a href="#" title="">x</a>
                    <div class="row-fluid">
                        <select id="pro-font-family">
                            <option value="Arial">Arial</option>
                            <option value="Comic Sans">Comic Sans</option>
                            <option value="Courier">Courier</option>
                            <option value="Georgia">Georgia</option>
                            <option value="Tahoma">Tahoma</option>
                            <option value="Verdana">Verdana</option>
                        </select>
                    </div>
                    <div class="row-fluid">
                        <a href="#" title="" id="pro-font-bold">B</a>
                        <a href="#" title="" id="pro-font-itilic">I</a>
                        <select id="pro-font-size">
                            <?php
                            for ($i = 9; $i < 32; $i++)
                            {
                                ?>
                                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="row-fluid">
                        <a id="pro-font-agile-left" href="#" title=""><span class="glyphicon glyphicon-align-left"></span></a>
                        <a id="pro-font-agile-center" href="#" title=""><span class="glyphicon glyphicon-align-center"></span></a>
                        <a id="pro-font-agile-right" href="#" title=""><span class="glyphicon glyphicon-align-right"></span></a>
                        <div id="pro-font-color"><div></div></div>
                    </div>
                </div>
            </li>
            <!--li class="pro-tool-item pro-tool-img pro-tool-text hide">
                <a class="btn-center" href="#" title=""></a>
            </li>
            <li class="pro-tool-item pro-tool-img pro-tool-text hide">
                <a class="btn-veti" href="#" title=""></a>
            </li-->
            <li class="pro-tool-item pro-tool-img pro-tool-text hide">
                <a class="btn-flip-w" href="#" title=""></a>
            </li>
            <li class="pro-tool-item pro-tool-img pro-tool-text hide">
                <a class="btn-flip-h" href="#" title=""></a>
            </li>
        </ul>
        <p style="font-size: 19px;"><i><small>Đơn giá:</small>
                &nbsp;<span class="label label-success" id="price" price=""></span></i></p>
    </div>
    <script type="text/x-kendo-template" id="list-product-template">
        <li>
        <a href="<?php echo $this->createUrl("getProduct"); ?>" title="#:name#"
        class="img-product" data-id="#:id#" price="#:price#">
        <img src="#:url#" />
        </a>
        </li>
    </script>
    <script type="text/x-kendo-template" id="list-item-template">
        <li>
        <a href="\#" title="#:name#" class="img-item" data-id="#:id#" 
        data-width="#:width#" data-height="#:height#" data-imgurl="#:url#" price="#:price#">
        <img src="#:url#" />
        </a>
        </li>
    </script>
    <script type="text/x-kendo-template" id="canvas-template">
        <div class="design-panel" data-type="#:type#">
        <img src="#:url#" />
        </div>
    </script>
    <script type="text/x-kendo-template" id="textTemplate">
        <div class="import-item import-text">
        <textarea data-bold="0" data-italic="0" data-size="16" placeHolder="Nhập chữ vào đây..."
        data-color="\#000000" data-family="Tahoma" data-align="0"></textarea>
        <span class="btn-remove glyphicon glyphicon-remove" title="Xóa bỏ"></span>
        <span class="btn-drag glyphicon glyphicon-move" title="Giữ để di chuyển"></span>
        </div>
    </script>
    <script type="text/x-kendo-template" id="itemTemplate">
        <div class="import-item import-img" style="width: #:width#; height: #:height#" price="#:price#">
        <img src="#:imgUrl#" />
        <span class="btn-remove glyphicon glyphicon-remove" title="Xóa bỏ"></span>
        <span class="btn-drag glyphicon glyphicon-move" title="Giữ để di chuyển"></span>
        </div>
    </script>
    <script type="text/x-kendo-template" id="pro-view-template">
        <li class="#if(isActive){ #selected# } #" data-type="#:type#" data-url="#:url#">
        <a href="\#">
        <img src="#:url#" />
        </a>
        </li>
    </script>
    <script type="text/x-kendo-template" id="pro-color-template">
        <li class="#if(isActive){ #selected# } #" data-color="#:color#"><a href="\#" style="background-color: #:color#;"></a></li>
    </script>
    <script type="text/x-kendo-template" id="pro-size-template">
        <li class="#if(isActive){ #selected# } #" data-id="#:id#"><a href="\#">#:name#</a></li>
    </script>
    <a href="<?php echo $this->createUrl("addTo"); ?>" title="" id="btn-add-cart">+ Thêm vào giỏ hàng</a>
</div>